<template>
  <div class="favorites-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h2>我的收藏</h2>
          <el-button type="primary" @click="manageFavorites">管理收藏</el-button>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="6" v-for="item in favorites" :key="item.id">
          <el-card :body-style="{ padding: '0px' }" class="product-card">
            <div class="favorite-actions" v-if="isManaging">
              <el-checkbox v-model="item.selected"></el-checkbox>
            </div>
            <img :src="item.image" class="product-image">
            <div class="product-info">
              <h3 class="product-title">{{ item.title }}</h3>
              <div class="product-price">
                <span class="price">¥{{ item.price }}</span>
              </div>
              <div class="product-footer">
                <el-button type="primary" link @click="viewDetail(item.id)">查看详情</el-button>
                <el-button type="danger" link @click="removeFromFavorites(item.id)">取消收藏</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="batch-actions" v-if="isManaging">
        <el-button type="danger" @click="batchRemove">批量删除</el-button>
        <el-button @click="cancelManage">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'FavoritesPage'
}
</script>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isManaging = ref(false)

const favorites = ref([
  {
    id: 1,
    title: '收藏商品1',
    price: 99,
    image: 'https://via.placeholder.com/200x200',
    selected: false
  }
  // ... 更多收藏数据
])

const manageFavorites = () => {
  isManaging.value = true
}

const cancelManage = () => {
  isManaging.value = false
  favorites.value.forEach(item => item.selected = false)
}

const viewDetail = (id) => {
  router.push(`/product/${id}`)
}

const removeFromFavorites = (id) => {
  // 实现移除收藏逻辑
}

const batchRemove = () => {
  // 实现批量删除逻辑
}
</script>

<style scoped>
.favorites-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-card {
  margin-bottom: 20px;
  position: relative;
}

.favorite-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 14px;
}

.product-title {
  font-size: 14px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  margin: 8px 0;
}

.price {
  color: #ff6b6b;
  font-size: 18px;
  font-weight: bold;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.batch-actions {
  margin-top: 20px;
  text-align: center;
}
</style> 